<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .backUp{
            width: 100px;
            border: 1px solid #ccc;
            cursor: pointer;
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: darkorange;
            border-radius: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <img src="movebg.png">
    <img src="up.gif" class="backUp">
    <script>
        var oImg = document.querySelector(".backUp"),iTimer = null;
        window.onscroll = function(){
            if(document.documentElement.scrollTop > document.documentElement.clientHeight){
                oImg.style.display = "block";
            }else{
                oImg.style.display = "none";
            }
        };
        oImg.onclick = function(){
            clearInterval(iTimer);
            var iSpeed = 0, iScrollTop = 0;
            iTimer = setInterval(function(){
                iScrollTop = document.documentElement.scrollTop;
                iSpeed = Math.floor(-iScrollTop/5);
                iScrollTop += iSpeed;
                document.documentElement.scrollTop = iScrollTop;
                console.log(iScrollTop);
                if(iScrollTop === 0){
                    clearInterval(iTimer);
                }
            }, 30);
        };

    </script>
</body>
</html>